<template>
<!-- 考勤组管理（已有考勤组） -->
<article :class="$root.platformClass.topArticle">
  <!-- 头部 -->
  <header class="headBar ta_av d-box">
    <aside class="asideBox ta_r" v-on:click="goBack">
      <i class="i-back"></i>
    </aside>
    <div class="headTitle b-flex">{{ title }}</div>
    <aside class="asideBox">
      <div></div>
    </aside>
  </header>
  <!-- 主体（管理员-考勤组列表不为空） -->
  <section class="mainPage addGroup" >
    <div class="imgCon"><img src="../../static/images/others/others_01.png" width="200" alt=""></div>
    <div class="content">
      <ol class="txtCon ta_c mt_25">
        <li class="">您不在任何一个考勤组中，无法考勤打卡</li>
        <li class="fz_12">您可以进行以下操作，将自己加入考勤组中</li>
      </ol>
      <div class="btnCon ta_c">
        <div class="btn mb_20" @click="$router.push({ name: 'GroupList' })">加入一个已有考勤组</div>
        <div class="btn mb_20" @click="$router.push({ name: 'AddGroup' })">新建考勤组</div>
        <div class="btn" @click="$router.push({name: 'ExceptionAppealList'})">进入异常审批</div>
      </div>
    </div>
  </section>

  <!-- 主体（管理员-考勤组列表为空） -->
  <section class="mainPage attGroup" v-if="groupList.length === 0 && status === '1'">
    <div class="imgCon"><img src="../../static/images/others/others_01.png" width="200" alt=""></div>
    <div class="content">
      <ol class="txtCon">
        <li class="d-box"><i class="spot"></i><p class="b-flex">管理员可按小组排班</p></li>
        <li class="d-box"><i class="spot"></i><p class="b-flex">支持查看团队出勤记录</p></li>
        <li class="d-box"><i class="spot"></i><p class="b-flex">成员可公司打卡、外勤打卡</p></li>
      </ol>
      <div class="btnCon ta_c" @click="$router.push({ name: 'ManageGuide' })">
        <div class="btn">新建考勤组</div>
      </div>
    </div>
  </section>

  <!-- 主体（普通员工） -->
  <section class="mainPage attGroup" v-if="status === '0'">
    <div class="imgCon"><img src="../../static/images/others/others_01.png" width="200" alt="打卡管理"></div>
    <div class="content staffAdd">
      <h3>温馨提示：</h3>
      <ol class="txtCon">
        <li class="d-box"><i class="spot"></i><p class="b-flex">您不在任何一个考勤组中，无法考勤打卡</p></li>
        <li class="d-box"><i class="spot"></i><p class="b-flex">请联系您的企业管理员，将您加入到考勤组中</p></li>
      </ol>
      <br>
      <div v-if="$root.userInfo.isAppealApprover" class="btn ta_c" @click="$router.push({name: 'ExceptionAppealList'})">进入异常审批</div>
    </div>
  </section>
</article>
</template>

<script>
import { getCookie } from '@/utils'
import { queryGroupList } from '@/api'

export default {
  name: 'UnAvailable',
  data () {
    return {
      title: '考勤组管理',
      status: getCookie('status'),
      groupList: []
    }
  },
  mounted () {
    let _this = this
    if (this.status === '1') {
      queryGroupList({ enterId: this.$root.userInfo.enterpriseId }, (err, data) => {
        if (err) {
          console.error(err)
        } else {
          _this.groupList = JSON.parse(JSON.stringify(data.var))
        }
      })
    }
  },
  methods: {
    goBack () {
      this.$root.backToHost()
    }
  }
}
</script>
